<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\ListView;
use frontend\components\TagsCloudWidget;
use frontend\components\RctReplyWidget;

use yii\helpers\HtmlPurifier;
use common\models\Comment;
use yii\helpers\Url;

/* @var $this yii\web\View */
/* @var $searchModel common\models\PostSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

?>
<!DOCTYPE html>
<html lange="ZH">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="yes"> <!--  一会试验下是否有必要存在 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-rim-auto-match" content="none"/>
    <meta name="HandheldFriendly" content="true"/>
    <title>详情</title>
    <link rel="stylesheet" href="css/widget.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
        #chatbox{
            margin: 200px auto 0px;
            width: 50%;
        }
        #emoji{
            width: 50px;
            font-size: 2em;
            cursor: pointer;
            float: left;
        }
        #send{
            width: 50px;
            height: 40px;
            line-height:40px;
            text-align: center;
            background-color: #66f3f1;
            color:#fff;
            float: right;
            cursor: pointer;
            padding: 0px;
            margin-right: -6px;
        }
        #result{
            clear: both;
            min-height: 50px;
            padding-top: 30px;
        }
        /*下面是表情的一些样式，可自行修改*/
        .emoji-box{
            overflow: hidden;
            width: 350px;
            position: absolute;
            border: 1px solid #ccc;
            z-index: 9998;
            background: #fff;
            border-radius: 5px;
        }
        em.tip{
            content:'';
            width:0px;
            height:0px;
            border-width:10px;
            border-style:solid;
            border-color:transparent  transparent  #ccc transparent ;
            position: absolute;
            z-index: 99999;
        }
        em.tip2{
            content:'';
            width:0px;
            height:0px;
            border-width:10px;
            border-style:solid;
            border-color:transparent  transparent  #fff transparent ;
            position: absolute;
            z-index: 99999;
        }
        .emoji-box>.emoji-btn-box{
            border-bottom: 1px solid #ccc;
        }
        .emoji-box>.emoji-btn-box>span{
            min-width: 50px;
            text-align:center;
            height: 30px;
            line-height: 30px;
            display: inline-block;
            padding:2px 10px;
            cursor: pointer;
            font-size: 1em;
            font-weight: bold;
            color: #ccc;
        }
        .emoji-box>ul.emoji-ul{
            padding: 0px;
            margin: 0px;
            width: 100%;
        }
        .emoji-box>ul.emoji-ul>li.emoji-li{
            border: 1px solid #fff;
            list-style: none;
            float: left;
        }
        .emoji-box>ul.emoji-ul>li.emoji-li:HOVER {
            border: 1px solid blue;
        }
    </style>

</head>
<body>
<div class="wrapper">

    <header class="con_hd">
        <h2 class="hd-tit" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最新文章</h2>
    </header>
    <br><br>
    <textarea cols="100" rows="50" id="content" style="width: 370px;height:100px;resize: none;overflow:auto;" placeholder="来输入点东西吧"></textarea>
    <div id="emoji" >😄</div>
    <div id="send" style="margin-right: 10px">发送</div>
    <div id="result" contenteditable="true"></div>
</div>

<footer class="footbottom">
    <p>All rights reserved | Design by<a href="http://www.lanrenmb.com/"> blog</a></p>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.emoji.js"></script>
<script type="text/javascript">
    $(function(){

        /*表情初始化
          content_el: 输入框的位置
                list: 下的属性详解
                    name		-- 分类名称
                    code 		-- 分类的表情编码，与其他分类不可重复
                    path 		-- 图片路径
                    suffix		-- 图片的后缀
                    max_number	-- 图片的最大个数
        */
        $("#emoji").emoji({content_el:"#content",
            list:[
                {
                    name:"QQ表情",
                    code:"qq_",
                    path:"./face/emoji1/",
                    suffix:".gif",
                    max_number:25
                },
                {
                    name:"emoji",
                    code:"em_",
                    path:"./face/emoji2/",
                    suffix:".png",
                    max_number:22
                }
                ,
                {
                    name:"其他",
                    code:"other_",
                    path:"./face/emoji3/",
                    suffix:".png",
                    max_number:1
                }
            ]
        });


    })

    //表情格式替换
    function replace_em(str){
        str = str.replace(/\</g,'&lt;');
        str = str.replace(/\>/g,'&gt;');
        str = str.replace(/\n/g,'<br/>');
        str = str.replace(/\[qq_([0-9]*)\]/g,"<img src='./face/emoji1/$1.gif' />");
        str = str.replace(/\[em_([0-9]*)\]/g,"<img src='./face/emoji2/$1.png'  />");
        str = str.replace(/\[other_([0-9]*)\]/g,"<img src='./face/emoji3/$1.png' />");
        return str;

    }
</script>
</body>
</html>